import Iconfont from "@/components/IconFont";
import cls from "classnames";
import React from "react";
import { CommonField } from "../../../CommonForm";
import { CommonText } from "../../CommonText";
import Style from "../../index.module.less";
/**
 * 可编辑文本组件
 */
export const EditAbleText = props => {
	const { editFieldProps, text, slot, onClick, hideEditIcon } = props;
	const [edit, setEdit] = React.useState(false);
	function clickEditIcon() {
		if (editFieldProps) {
			setEdit(true);
		}
		return onClick?.();
	}

    const IconComp = hideEditIcon ? () => null : Iconfont
    
	if (slot) {
		return slot ? (
			<CommonText
				{...props}
				icon={slot}
				after={
					slot ? (
						<span className={cls(Style.edit_field, Style.pointer)} onClick={clickEditIcon}>
							<IconComp type="iconbianji1-copy" />
						</span>
					) : (
						<>
							<IconComp type="iconbianji1-copy" />
						</>
					)
				}
			/>
		) : (
			<></>
		);
	}
	return edit ? (
		<CommonField
			{...editFieldProps}
			props={{
				...editFieldProps.props,
				onBlur: () => {
					setEdit(false);
					editFieldProps.props?.onBlur?.();
				}
			}}
		/>
	) : text ? (
		<CommonText
			{...props}
			text={text}
			after={
				text ? (
					<span className={cls(Style.edit_field, Style.pointer)} onClick={clickEditIcon}>
						<IconComp type="iconbianji1-copy" />
					</span>
				) : (
					<>
						<IconComp type="iconbianji1-copy" />
					</>
				)
			}
		/>
	) : (
		<></>
	);
};
export default EditAbleText;
